<%--
  Created by IntelliJ IDEA.
  User: lingshao
  Date: 2020/9/19
  Time: 11:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>考生状态</title>
    <%--    引入layer--%>
    <script src="../jQuery/jquery-1.11.2.js"></script>
    <link rel="stylesheet" href="../layui/layui/css/layui.css" media="all">
    <script src="../layer/layer/layer.js"></script>

    <script src="../layui/layui/layui.js"></script>
    <style type="text/css">
        .layui-table-cell{
            height:36px;
            line-height: 36px;
        }
        *{
            font-size: 20px;
            font-family: 微软雅黑;
        }
    </style>

    <script type="text/javascript">
        $(function () {
            //查询所有班级
            $.ajax({
                async:false,
                url:"../ClassServlet?method=findClass",
                type:'GET',
                data:"",
                success:function (data) {
                    data=$.parseJSON(data);
                    var leng=data.json1;
                    var str="<option value=''>"+"--请选择班级名称--"+"</option>";
                    $.each(leng,function (index,item) {
                        str+="<option value="+item.className+">"+item.className+"</option>";
                    });
                    $("#className").append(str);
                }
            });
        });
    </script>

</head>
<body>

<blockquote class="layui-elem-quote news_search">
    <%--头部工具栏--%>
    <div class="demoTable" id="demoTableId" hidden="true">
        <form class="layui-form">
            <div class="layui-inline">
                <input style="width: 200px;height: 35px;" placeholder="请输入考生姓名" class="layui-input" name="stuName" id="stuId" autocomplete="off" />
            </div>
            <div class="layui-inline">

            </div>
            <div class="layui-inline">
                <select name="className" id="className" >
<%--                    <option value="">--请选择班级编号--</option>--%>
<%--                    <option value="1">t281</option>--%>
<%--                    <option value="2">t282</option>--%>
<%--                    <option value="3">t283</option>--%>
<%--                    <option value="4">t285</option>--%>
<%--                    <option value="5">t286</option>--%>
<%--                    <option value="6">t287</option>--%>
                </select>
            </div>
            <div class="layui-inline">
                <select name="conditions" lay-verify="" id="conditions" style="height: 45px">
                    <option value="">--请选择考生状态--</option>
                    <option value="待考试">待考</option>
                    <option value="在考">在考</option>
                </select>
            </div>
            <div class="layui-inline">
                <button class="layui-btn layui-btn-radius layui-btn-normal layui-icon layui-icon-search" lay-submit lay-filter="search" >搜索</button>
            </div>
            <div style="float: right;margin-right: 20px;">
                <a href="" class="layui-btn layui-btn-radius layui-icon layui-icon-add-circle " >状态更新</a>
                <a href="javascript:;" class="layui-btn layui-btn-radius layui-btn-danger layui-icon layui-icon-delete " lay-event="allDelete">批量删除</a>
            </div>
        </form>
    </div>

    <%--展示表格--%>
    <table id="demo" lay-filter="test"></table>
</blockquote>


<%--添加和修改弹出对话框--%>
<div style="display: none;" id="MaxDiv">
    <div style="margin-top: 50px;margin-left: 20px;">
        <form class="layui-form" id="mainForm" method="post" lay-filter="classManagerForm">
            <div class="layui-form-item">
                <label class="layui-form-label">考生编号</label>
                <div class="layui-input-inline">
                    <input type="text" name="conditionId" style="width: 300px;" id="stopText"  lay-verify="required" placeholder="--考生编号--" autocomplete="off" class="layui-input" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">学号</label>
                <div class="layui-input-inline">
                    <input type="text" name="stuId" style="width: 300px;"   lay-verify="required" placeholder="--学号--" autocomplete="off" class="layui-input" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">教员编号</label>
                <div class="layui-input-inline">
                    <input type="text" name="classId" style="width: 300px;"   lay-verify="required" placeholder="--班级编号--" autocomplete="off" class="layui-input" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">班级编号</label>
                <div class="layui-input-inline">
                    <input type="text" name="paperId" style="width: 300px;"   lay-verify="required" placeholder="--试卷编号--" autocomplete="off" class="layui-input" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">考生状态</label>
                <div class="layui-input-inline">
                    <input type="text" name="conditions" style="width: 300px;"   lay-verify="required" placeholder="--考生状态--" autocomplete="off" class="layui-input" />
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-radius" style="margin-left: 40px"  id="okk"  lay-submit lay-filter="okkFilter" >确认</button>
                    <button type="reset" class="layui-btn layui-btn-radius layui-btn-warm">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>


<script type="text/javascript">
    layui.use(['table','layer','form'], function(){
        var table = layui.table;
        var layer=layui.layer;
        var form=layui.form;
        //定义一个编号，便于后期关闭div对话框
        var closeDiv;
        //第一个实例，渲染表格
        table.render({
            elem: '#demo'
            ,cellMinWidth: 80
            ,height:665
            ,toolbar:"#demoTableId"
            ,method:'post'
            ,url: '../StatuServlet?method=findAll' //数据接口
            , limits: [5,10,15,20]  //一页选择显示3,5或10条数据
            , limit: 5  //一页显示10条数据
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
                var result;
                if (this.page.curr) {
                    result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                }
                else {
                    result = res.data.slice(0, this.limit);
                }
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": result //解析数据列表
                };
            }
            ,cols: [[ //表头
                {type:"checkbox",fixed: "left"}
                ,{field: 'conditionId', title: '考生编号', align: 'center', fixed: 'left'}
                ,{field: 'stuName', title: '考生姓名', align: 'center'
                    // ,templet:function (d) {
                    //     if (d.stuId=="t28601"){
                    //         return '<span>胡帅</span>';
                    //     }else if (d.stuId=="t28602"){
                    //         return '<span>李德生</span>';
                    //     }else if (d.stuId=="t28603"){
                    //         return '<span>胡标</span>';
                    //     }else if (d.stuId=="t28604"){
                    //         return '<span>阳赛</span>';
                    //     }else if (d.stuId=="t28605"){
                    //         return '<span>郑志杰</span>';
                    //     }else if (d.stuId=="t28606"){
                    //         return '<span>杨腾</span>';
                    //     }else if (d.stuId=="t28607"){
                    //         return '<span>罗坤</span>';
                    //     }else if (d.stuId=="t28608"){
                    //         return '<span>游永康</span>';
                    //     }else if (d.stuId=="t28609"){
                    //         return '<span>邓志强</span>';
                    //     }else if (d.stuId=="t28610"){
                    //         return '<span>阳结</span>';
                    //     }
                    // }
                    }
                , {
                    field: 'className', title: '班级名称', align: 'center',
                    // templet: function (d) {
                    //     //注意格式,此处d为对象，d.字段名来获得该字段值
                    //     if (d.classId ==6) {
                    //         return '<span >t286</span>';
                    //     }
                    // }
                }
                ,{field: 'paperId', title: '试卷编号', align: 'center'}
                ,{field: 'conditions', title: '考生状态', align: 'center'}
            ]]
            ,page:true
        });



        //判断点击的是搜索
        form.on("submit(search)",function(data){
            //获取数据
            var dataTable=data.field;
            if (dataTable.stuName!="" || dataTable.className!="" || dataTable.conditions!=""){
                //重载表格，刷新时发送数据
                table.reload("demo",{
                    page:{//刷新后从第几页开始显示
                        curr: 1
                    },
                    where:{
                        stuName:dataTable.stuName,
                        className:dataTable.className,
                        conditions:dataTable.conditions
                    }
                });
            }else{
                layer.msg("请输入内容")
            }
            return false;
        });


        //判断点击的是添加还是批量删除
        table.on("toolbar(test)",function (data) {
            //让主键可以输入
            $("#stopText").removeAttr("readonly");
            //判断点击的是批量删除
            if (data.event=="allDelete"){//点击的是批量删除
                //拿到复选框选中行数据
                var data1=table.checkStatus(data.config.id).data;
                if (data1.length>0){
                    layer.confirm('确定要删除吗?', {icon: 3, title:'提示'}, function(index){
                        var conditionIdStr="";
                        $.each(data1,function(index,item){
                            conditionIdStr+=item.conditionId+",";
                        });
                        conditionIdStr=conditionIdStr.substring(0,conditionIdStr.length-1);
                        //通过ajax发送数据
                        $.ajax({
                            type:"post",
                            url:"../StatuServlet?method=batchDel",
                            data:"conditionIdStr="+conditionIdStr,
                            dataType:"text",
                            success:function(data){
                                if (data=="ok"){
                                    layer.msg("删除成功");
                                    table.reload('demo');
                                }else{
                                    layer.msg("删除失败")
                                }
                            }
                        });
                        layer.close(index);
                    });
                }else{
                    layer.msg("请选择数据再进行删除！");
                }
            }
        });

    });
</script>
</body>
</html>

